/*
 *
 * @ProjectName:    my_umi_app
 * @Package:
 * @ClassName:      list
 * @Description:    博客留言页面
 * @Author:         SuPeiSen
 * @CreateDate:     2021/3/4 6:31 下午
 * @UpdateDate:     2021/3/4 6:31 下午
 * @UpdateRemark:   更新说明：
 * @Version:        1.0
 */

import React, { useEffect, useState } from 'react';
import { MessageInputWidget } from '@/widget/message_input_widget/message_input_widget';
import './style/blog_message_list.less';
import {
  BlogGetBlogMessageListApi,
  BlogSentMessageApi,
} from '@/service/blog/blog_message_api';
import { message } from 'antd';
import { BlogMessageItemType } from '@/type/blog/message_type';
import { MessageListWidget } from '@/widget/message_widget/message_widget';

/**
 * 博客留言页面
 */
export default () => {
  // 保存文章留言列表
  const [articleMessageList, setArticleMessageList] = useState<
    Array<BlogMessageItemType> | undefined
  >(undefined);

  useEffect(() => {}, [
    BlogGetBlogMessageListApi().then((model) => {
      if (model.success) {
        setArticleMessageList(model.data?.data);
      }
    }),
    [],
  ]);

  // 提交留言
  const submitMessage = (
    userName: string,
    userEmail: string,
    content: string,
    userSex: number,
  ) => {
    BlogSentMessageApi({
      user_name: userName,
      user_email: userEmail,
      message_content: content,
      article_id: -1,
      user_sex: userSex,
    }).then((model) => {
      if (model.success) {
        message.success('留言成功');
      } else {
        message.error(model.msg);
      }
    });
  };
  return (
    <div className={'message_list'}>
      <span className={'message_list_title'}>留言板</span>
      <span className={'message_list_title_tip'}>
        感谢各位大佬留言，我会认真对待每一条留言的😋
      </span>

      <div className={'message_input'}>
        <MessageInputWidget onClickBtn={submitMessage} />
        <div style={{ marginTop: '5%' }}>
          <MessageListWidget messageList={articleMessageList} />
        </div>
      </div>
    </div>
  );
};
